<nz-content>
  <div class="search-collapse">
    <form
      nz-form
      [nzLayout]="'inline'">
      <nz-form-item>
        <nz-form-label>角色名称</nz-form-label>
        <nz-form-control>
          <input nz-input />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>权限字符</nz-form-label>
        <nz-form-control>
          <input nz-input />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>角色状态</nz-form-label>
        <nz-form-control>
          <input nz-input />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>创建时间</nz-form-label>
        <nz-form-control>
          <nz-range-picker ></nz-range-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button class="btn-primary"> <i nz-icon nzType="search"></i>搜索</button>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button class="btn-warning"> <i nz-icon nzType="sync"></i>重置</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>


  <div class="search-table">
    <nz-table
      #rowSelectionTable
      nzShowPagination
      nzShowSizeChanger
      [nzData]="listOfAllData"
      (nzCurrentPageDataChange)="currentPageDataChange($event)"
    >
      <thead>
      <tr>
        <th
          nzShowCheckbox
          [(nzChecked)]="isAllDisplayDataChecked"
          [nzIndeterminate]="isIndeterminate"
          (nzCheckedChange)="checkAll($event)"
        ></th>
        <th>编号</th>
        <th>角色名称</th>
        <th>权限字符</th>
        <th>显示顺序</th>
        <th>角色状态</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of rowSelectionTable.data">
        <td
          nzShowCheckbox
          [(nzChecked)]="mapOfCheckedId[data.id]"
          [nzDisabled]="data.disabled"
          (nzCheckedChange)="refreshStatus()"
        ></td>
        <td>{{ data.name }}</td>
        <td>{{ data.age }}</td>
        <td>{{ data.address }}</td>
        <td>{{ data.address }}</td>
        <td>{{ data.address }}</td>
        <td>{{ data.address }}</td>
      </tr>
      </tbody>
    </nz-table>
  </div>
</nz-content>
